<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>圈子详情</title>
</head>
<link rel="stylesheet" type="text/css" href="../styles/index.css">
<script type="text/javascript">
	(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '20px';
                }else{
                    docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<body>
	<div class="warp hbg">

		<section class="circleBox">
			<div class="circleTop">
				<div class="circleBg">
					<img src="../images/temp/topbg.jpg" alt="">
					<p class="title">姜昕宝 京东读者圈</p>
				</div>
				<p class="circleClick">
					<a class="mComt" href="javascript:void(0)">发表</a>
					<a class="mClick" href="javascript:void(0)">提问</a>
				</p>
			</div>
			<div class="circleInfo">
				<ul>
					<li>
						<p class="logos"><img src="../images/bgs/logos.png"></p>
						<p class="name">小王</p>
						<p class="time">2017-05-09 20:30</p>
						<p class="cont">
							Arrt
						</p>
						<p class="click">
							<span class="goods"></span>
							<span class="msgs mClick"></span>
						</p>
						<div class="info">
							<p class="infoTop">
								<i></i>
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>孙总的小秘书</span>,
								<span>孙总</span>
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>孙总的小秘书</span>,
								<span>孙总</span>
							</p>
							<ul>
								<li>
									<div class="tellItem">
										<div class="tell"><span>小罗</span>：你的文章写得太好了,我非常喜欢.</div>
										<div class="reply">
											<span class="time">7月6日 22:56</span>
											<span class="huifu">回复</span>
										</div>
									</div>
									<div class="tellItem">
										<div class="tell"><span>小王 回复 小罗</span>：谢谢你的支持!</div>
										<div class="reply">
											<span class="time">7月6日 23:56</span>
											<span class="huifu">回复</span>
										</div>	
									</div>
								</li>
								<li>
									<div class="tellItem">
										<div class="tell"><span>小红</span>：你的文章写得太好了,我非常喜欢.</div>
										<div class="reply">
											<span class="time">7月6日 22:56</span>
											<span class="huifu">回复</span>
										</div>
									</div>
									<div class="tellItem">
										<div class="tell"><span>小王 回复 小红</span>：谢谢你的支持!</div>
										<div class="reply">
											<span class="time">7月6日 23:56</span>
											<span class="huifu">回复</span>
										</div>	
									</div>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<p class="logos"><img src="../images/bgs/logos.png"></p>
						<p class="name">小罗</p>
						<p class="time">2017-05-09 20:30</p>
						<p class="cont">
							Arrt
						</p>
						<p class="click">
							<span class="goods active"></span>
							<span class="msgs mClick"></span>
						</p>
						<div class="info">
							<p class="infoTop">
								<i></i>
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>孙总的小秘书</span>,
								<span>孙总</span>
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>王总</span>,
								<span>孙总的小秘书</span>,
								<span>小罗</span>,
								<span>孙总的小秘书</span>,
								<span>孙总</span>
							</p>
							<ul>
								<li>
									<div class="tellItem">
										<div class="tell"><span>小红</span>：你的文章写得太好了,我非常喜欢.</div>
										<div class="reply">
											<span class="time">7月6日 22:56</span>
											<span class="huifu">回复</span>
										</div>
									</div>
									<div class="tellItem">
										<div class="tell"><span>小王 回复 小红</span>：谢谢你的支持!</div>
										<div class="reply">
											<span class="time">7月6日 23:56</span>
											<span class="huifu">回复</span>
										</div>	
									</div>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			
			<!--评论-->
			<!-- <div class="popBox comt">
				<div class="popInfo">
					<p class="title">文章评论<span class="popClose"></span></p>
					<form>
						<div class="textBox">
							<textarea class="textarea"></textarea>
							<p class="msg"><span>0</span>/200</p>
						</div>
						<div class="clickBox">
							<button>提交</button>
						</div>
					</form>
				</div>
			</div> -->
			
			<!--提问-->
			<!-- <div class="popBox quiz">
				<div class="popInfo">
					<p class="title">文章提问<span class="popClose"></span></p>
					<form>
						<div class="textBox">
							<textarea class="textarea"></textarea>
							<p class="msg"><span>0</span>/200</p>
						</div>
						<div class="clickBox">
							<button>提交</button>
						</div>
					</form>
				</div>
			</div> -->

		</section>
		
		<footer class="footer">
			<nav class="nav">
				<ul>
					<li class="active">
						<a href="">
							<span class="navA"></span>
							<p>发现</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navB"></span>
							<p>圈子</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navC"></span>
							<p>阅读</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navD"></span>
							<p>我</p>
						</a>
					</li>
				</ul>
			</nav>
		</footer>
	</div>
</body>
<script src='../js/jquery-1.9.1.js'></script>
<script src='../js/common.js'></script>
<script type="text/javascript">
	$(function(){

		/*点击评论*/
		$('.mComt').click(function(){
			$(document).popUp('<div class="popBox comt">'+
					'<div class="popInfo">'+
						'<p class="title">文章评论<span class="popClose"></span></p>'+
						'<form>'+
							'<div class="textBox">'+
								'<textarea class="textarea"></textarea>'+
								'<p class="msg"><span>0</span>/200</p>'+
							'</div>'+
							'<div class="clickBox">'+
								'<button>提交</button>'+
							'</div>'+
						'</form>'+
					'</div>'+
				'</div>'
				)
		});

		/*点击提问*/
		$('.mClick').click(function(){
			$(document).popUp('<div class="popBox comt">'+
					'<div class="popInfo">'+
						'<p class="title">文章提问<span class="popClose"></span></p>'+
						'<form>'+
							'<div class="textBox">'+
								'<textarea class="textarea"></textarea>'+
								'<p class="msg"><span>0</span>/200</p>'+
							'</div>'+
							'<div class="clickBox">'+
								'<button>提交</button>'+
							'</div>'+
						'</form>'+
					'</div>'+
				'</div>')
		});

		/*点赞*/
		$('.circleInfo .goods').click(function(){
			$(this).toggleClass('active');
		})

		/*点击回复评论*/
		$('.circleInfo ul li .huifu').click(function(){
			$(document).popUp('<div class="popBox comt">'+
					'<div class="popInfo">'+
						'<p class="title">回复评论<span class="popClose"></span></p>'+
						'<form>'+
							'<div class="textBox">'+
								'<textarea class="textarea"></textarea>'+
								'<p class="msg"><span>0</span>/200</p>'+
							'</div>'+
							'<div class="clickBox">'+
								'<button>提交</button>'+
							'</div>'+
						'</form>'+
					'</div>'+
				'</div>'
				)
		})
		
	})
</script>
</html>